<template>
    <div class="page-container">
        <!-- 说明信息栏 -->
        <div class="info-bar">
            <div class="info-content">
                <el-icon class="info-icon">
                    <InfoFilled />
                </el-icon>
                <div class="info-messages">
                    <div class="info-message">1. 点击页面设计，可编辑签字端效果、可修改背景、字体类型、签字颜色、笔迹粗细等</div>
                    <div class="info-message">2. 手机或 PAD 打开，会进行屏幕适配</div>
                </div>
            </div>
        </div>

        <!-- 主内容区 -->
        <div class="client-setting-container">
            <img src="@/assets/icon.png" class="client-preview-image" :style="{ width: imageWidth + '%' }" />
            <div class="client-preview-text">签字效果</div>
            <el-button type="primary" size="large" class="client-design-button" @click="openPageSetting">
                页面设计
            </el-button>
        </div>

        <!-- 底部操作栏 -->
        <FixedActionBar :visible="true">
            <el-button @click="$router.push('/project-list')">返回活动列表</el-button>
            <el-button type="primary" @click="openScreen">
                <el-icon>
                    <Monitor />
                </el-icon>
                进入大屏
            </el-button>
        </FixedActionBar>
    </div>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";
import FixedActionBar from '@/components/common/BottomActionBar.vue';

// 图片宽度控制（示例值，可根据需要调整）
const imageWidth = 100;
const router = useRouter();

const openScreen = () => {
    console.log('进入大屏')
}

const openPageSetting = () => { 
    router.push("/client-page-setting");
}

</script>

<style scoped>
/* 页面容器 */
.page-container {
    padding-bottom: 80px;
    position: relative;
}

/* 信息提示栏样式 */
.info-bar {
    background-color: rgba(8, 59, 111, 0.758);
    padding: 12px 20px;
    margin: 5px 5px 20px;
    border-left: 9px solid #409eff;
    border-radius: 4px;
    color: white;
}

.info-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.info-icon {
    margin-bottom: 8px;
}

.info-messages {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.info-message {
    line-height: 1.5;
}

/* 主内容容器（靠左对齐） */
.client-setting-container {
    margin-right: auto;
    max-width: 300px;
    padding: 20px;
}

/* 容器内部元素统一居中 */
.client-setting-container>* {
    display: block;
    margin: 16px auto;
    text-align: center;
}

/* 图片样式 */
.client-preview-image {
    display: block;
}

/* 文字样式 */
.client-preview-text {
    font-size: 18px;
    font-weight: 500;
}

/* 按钮样式 */
.client-design-button {
    width: 120px;
}
</style>